<template>
  <el-form class="headform" label-position="right" :inline="true" v-model="searchForm" label-width="auto">
    <el-row>
      <el-col :span="8">
        <el-form-item label="开票号">
          <el-input v-model="searchForm.invoiceNumber"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户名称">
          <el-select v-model="searchForm.customerName" filterable remote reserve-keyword placeholder="请选择"
            :remote-method="searchCustomer" :loading="loading" clearable>
            <el-option v-for="item in customerNameOptions" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="类型">
          <el-select v-model="searchForm.type" clearable>
            <el-option label="统接" value="统接"></el-option>
            <el-option label="自接" value="自接"></el-option>
            <el-option label="BSL" value="BSL"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="合同号">
          <el-input v-model="searchForm.contractNo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开票金额">
          <el-input v-model="searchForm.commodityMoney"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="button">
        <el-button type="primary" @click="searchList">查询</el-button>
        <el-button type="primary" @click="exportList">导出</el-button>
        <!-- <el-button type="primary" @click="addNew(1)">自建新建</el-button>
        <el-button type="primary" @click="addNew(2)">统接新建</el-button>
        <el-button type="primary" @click="addNew(3)">BSL新建</el-button> -->
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" style="width: 100%;" ref="table" @selection-change="handleSelectionChange"
    table-layout="auto" row-key="getRowKeys">
    <el-table-column prop="invoiceNumber" label="开票号" align="center"></el-table-column>
    <el-table-column prop="type" label="类型" align="center"></el-table-column>
    <el-table-column prop="customerName" label="客户名称" align="center"></el-table-column>
    <el-table-column prop="contractNo" label="合同号" align="center"></el-table-column>
    <el-table-column prop="commodityMoney" label="开票金额" align="center"></el-table-column>
    <el-table-column prop="way" label="付款方式" align="center">
      <template #default="scope">
        {{ scope.row.invoiceRatio }}%{{ scope.row.invoiceMethod }}</template>
    </el-table-column>
    <el-table-column prop="applyTime" label="日期" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="draft(scope.row)" link size="small"
          v-if="scope.row.status == '开票草稿'">草稿</el-button>
        <el-button type="primary" @click="invoice(scope.row)" link size="small"
          v-if="scope.row.status == '待开票'">开票（4）</el-button>
        <el-button type="primary" @click="invoiceDouble(scope.row)" link size="small"
          v-if="scope.row.status == '待开票'">开票（8）</el-button>
        <el-button type="primary" @click="invoiceNew(scope.row)" link size="small"
          v-if="scope.row.status == '待开票'">开票（新）</el-button>
        <el-button type="primary" @click="view(scope.row)" link size="small"
          v-if="scope.row.status != '待开票' && scope.row.status != '开票草稿'">查看</el-button>
        <el-button type="primary" @click="edit(scope.row)" link size="small"
          v-if="scope.row.status == '待审核'">修改</el-button>
        <el-button type="primary" @click="print(scope.row)" link size="small"
          v-if="scope.row.status == '已开票'">打印</el-button>
        <el-button type="primary" @click="download(scope.row)" link size="small"
          v-if="scope.row.status == '已开票'">下载</el-button>
        <!-- <el-button type="primary" @click="repeat(scope.row)" link size="small"
          v-if="scope.row.status == '已开票'">复用</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15]"
    :small="small" :disabled="disabled" :background="background" layout="total, prev, pager, next, sizes, jumper"
    :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { useStore } from '@/stores/counter';
import { useRouter } from "vue-router";
import { ganxiangList, findAllByName, exportganxiang } from '@/utils/invoice';
import InvoiceChange from './InvoiceChange.vue';
const router = useRouter();
const use_store = useStore()
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const totalPage = ref(0)
const searchForm = ref({
  commodityMoney: "",
  contractNo: "",
  customerName: "",
  invoiceNumber: "",
  type: ""
})
const tableData = ref([])
const customerNameOptions = ref([])


onMounted(() => {
  searchList()
})

function searchList() {
  ganxiangList(searchForm.value, currentPage4.value, pageSize4.value).then(res => {
    tableData.value = res.data.records
    totalPage.value = res.data.total
  })
}

function searchCustomer(params) {
  findAllByName({ name: params }).then(res => {
    customerNameOptions.value = res.data
  })
}

function handleSizeChange() {
  searchList()
}

function handleCurrentChange() {
  searchList()
}

function draft(row) {
  if (row.remark == '2') {
    invoiceDouble(row)
  } else if (row.remark == '3') {
    invoiceNew(row)
  } else {
    invoice(row)
  }
}

function invoice(row) {
  use_store.id = row.id
  use_store.operation = 2
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  router.push({
    path: '/InvoiceChange'
  })
}

function invoiceDouble(row) {
  use_store.id = row.id
  use_store.operation = 2
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  router.push({
    path: '/InvoiceDoubleChange'
  })
}

function invoiceNew(row) {
  use_store.id = row.id
  use_store.operation = 2
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  router.push({
    path: '/InvoiceNewChange'
  })
}

function edit(row) {
  use_store.id = row.id
  use_store.operation = 2
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  if (row.remark == '2') {
    router.push({
      path: '/InvoiceDoubleChange'
    })
  } else if (row.remark == '3') {
    router.push({
      path: '/InvoiceNewChange'
    })
  } else {
    router.push({
      path: '/InvoiceChange'
    })
  }
}

function view(row) {
  use_store.id = row.id
  use_store.operation = 1
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  if (row.remark == '2') {
    router.push({
      path: '/InvoiceDoubleChange'
    })
  } else if (row.remark == '3') {
    router.push({
      path: '/InvoiceNewChange'
    })
  } else {
    router.push({
      path: '/InvoiceChange'
    })
  }
}


function print(row) {
  use_store.id = row.id
  use_store.operation = 6
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  if (row.remark == '2') {
    router.push({
      path: 'printDoubleInvoice'
    })
    if (row.type == '外销-形式发票-干箱-统接') {
      use_store.status = 2;
      router.push({
        path: 'dryBoxPrintDoubleInvoice'
      })
    }
  } else {
    router.push({
      path: 'printInvoice'
    })
    if (row.type == '外销-形式发票-干箱-统接') {
      use_store.status = 2;
      router.push({
        path: 'dryBoxPrintInvoice'
      })
    }
  }
}

function download(row) {
  use_store.id = row.id
  use_store.operation = 7
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  if (row.list.length > 4) {
    router.push({
      path: 'printDoubleInvoice'
    })
    if (row.type == '外销-形式发票-干箱-统接') {
      use_store.status = 2;
      router.push({
        path: 'dryBoxPrintDoubleInvoice'
      })
    }
  } else {
    router.push({
      path: 'printInvoice'
    })
    if (row.type == '外销-形式发票-干箱-统接') {
      use_store.status = 2;
      router.push({
        path: 'dryBoxPrintInvoice'
      })
    }
  }
}

function repeat(row) {
  use_store.id = row.id
  use_store.operation = 4
  use_store.path = 'dryBox'
  if (row.type == '外销-形式发票-零部件') {
    use_store.status = 4;
  } else if (row.type == '外销-形式发票-干箱-自接') {
    use_store.status = 1;
  } else if (row.type == '外销-形式发票-干箱-统接') {
    use_store.status = 2;
  } else if (row.type == '外销-形式发票-干箱-BSL') {
    use_store.status = 3;
  }
  if (row.list.length > 4) {
    router.push({
      path: '/InvoiceDoubleChange'
    })
  } else {
    router.push({
      path: '/InvoiceChange'
    })
  }
}

function addNew(val) {
  use_store.status = val;
  router.push({
    path: '/InvoiceChange'
  })
}

function exportList() {
  exportganxiang(searchForm.value, currentPage4.value, pageSize4.value).then(data => {
    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
    const date = new Date().toLocaleDateString()
    const link = document.createElement('a')
    link.href = url
    let attributeValue = `开票列表（干箱）${date}-报表记录.xlsx`
    link.setAttribute('download', attributeValue)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}
</script>
<style lang="scss">
.el-col {
  padding-right: 20px;

  .el-form-item {
    width: 100%;
    margin-right: 20px;
  }
}

// .button {
//   padding-left: 25px;
// }

.el-pagination {
  margin-top: 10px;
  float: right;
}
</style>